<template>
  <!-- html 结构 -->
  <div class="talk">
    <button @click="getTalk">获取土味情话</button>
    <ul>
      <li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup name="LoveTalk">
import { useTalkStore } from "@/store/LoveTalk";

const talkStore = useTalkStore();
let talkList = talkStore.talkList;

// let talkList = reactive([
//   { id: "00001", title: "土味情话一" },
//   { id: "00002", title: "土味情话二" },
//   { id: "00003", title: "土味情话三" },
// ]);

// async function getTalk() {
//   let result = await axios.get("https://api.shadiao.pro/chp");
//   console.log(result.data.data.text);

//   let obj = { id: nanoid(), title: result.data.data.text };
//   console.log(obj);
//   talkList.unshift(obj);
// }

// 这里使用了第三种修改pinia数据的方法
function getTalk() {
  talkStore.getATalk();
}

// $subscribe 订阅store中的数据
talkStore.$subscribe((mutate, state) => {
  // console.log("talkStore中的数据变化了", mutate, state);
  localStorage.setItem("talklist", JSON.stringify(state.talkList));
});
</script>

<style scoped>
/* 样式 */

.talk {
  background-color: orange;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>
